import React from 'react'
import clsx from 'clsx'
import Translate from '@docusaurus/Translate'
import styles from './styles.module.css'
import challenge1Image from '/static/img/new_challenge1.png'
import challenge2Image from '/static/img/new_challenge2.png'
import challenge3Image from '/static/img/new_challenge3.png'

interface FeatureItem {
  title: JSX.Element
  Svg: string
  description: JSX.Element
}

const FeatureList: FeatureItem[] = [
  {
    title: (
      <Translate
        id="component.home.HomepageFeatures.features.1"
        description="about challenge 1">
        Customize OS runtime
      </Translate>
    ),
    Svg: challenge1Image,
    description: <></>,
  },
  {
    title: (
      <Translate
        id="component.home.HomepageFeatures.features.2"
        description="about challenge 2">
        Fragmented hardware
      </Translate>
    ),
    Svg: challenge2Image,
    description: <></>,
  },
  {
    title: (
      <Translate
        id="component.home.HomepageFeatures.features.3"
        description="about challenge 3">
        Multi-Kernel architectures
      </Translate>
    ),
    Svg: challenge3Image,
    description: <></>,
  },
]

function Feature({ title, Svg, description }: FeatureItem) {
  return (
    <div className={clsx('col col--4')}>
      <div className="text--center">
        <img src={Svg} className={clsx(styles.featureSvg)} />
      </div>
      <div className="text--center padding-horiz--md">
        <h3>{title}</h3>
        <p>{description}</p>
      </div>
    </div>
  )
}

export default function HomepageFeatures(): JSX.Element {
  return (
    <section className={clsx(styles.features)}>
      <div className="container">
        <div className="row">
          <div className={clsx('col col--12', styles.center)}>
            <h1 className={clsx('hero__title', styles.title)}>
              <Translate
                id="component.home.HomepageFeatures.title"
                description="about the challenges of PolyOS">
                Challenges
              </Translate>
            </h1>
          </div>
        </div>
        <div className="row">
          {FeatureList.map((props, idx) => (
            <Feature key={idx} {...props} />
          ))}
        </div>
      </div>
    </section>
  )
}
